import { useWatermark } from "../../hooks/useWatermark";
import { Tree, type TreeNode } from 'lee-test-ui'
import 'lee-test-ui/dist/lee-test-ui.css'
export default function Demo13() {
  const [updateWatermark, opts] = useWatermark({
    content: "shawlee",
  });

  const treeData: TreeNode[] = [
    {
      id: '1',
      label: '1',
      selected: false,
      children: [
        {
          id: '1-1',
          label: '1-1',
          selected: false,
          children: [
            {
              id: '1-1-1',
              label: '1-1-1',
              selected: false,
              children: []
            }
          ]
        }
      ]
    },
    {
      id: '2',
      label: '2',
      selected: false,
      children: []
    }
  ]

  const update = () => {
    updateWatermark({
      content: "更新水印",
    });
  };
  return (
    <>
      <div>自定义hooks</div>
      <p>
        我们并不需要重复的造轮子，已经有很多现成的库可以使用，比如ahooks,react-use,SWR,react-hook-form
      </p>
      <div>{JSON.stringify(opts)}</div>
      <button onClick={update}>更新水印</button>
      <div>
        <Tree data={treeData} onChecked={(e) => { console.log(e) }} />
      </div>
    </>
  );
}
